<!-- 平台管理>中间地图 -->
<template>
    <div class="containerplanMap-container" ref="element">
        <div class="plan-circle planwave" :style="{width:scrollerHeight}" >
            <div class="w1"></div>
            <div class="w2"></div>
            <div class="w3"></div>
        </div>
        <div id="containerplanMap_china"></div>
    </div>
</template>
<script>
import { getDataTransmitStatus } from '@/api/platMonitor'

let Echarts = require("echarts/lib/echarts");
require("echarts/map/js/china");
//不同的迁徙图飞机样式
//let planePath ='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
//let planePath = "path://M917.965523 917.331585c0 22.469758-17.891486 40.699957-39.913035 40.699957-22.058388 0-39.913035-18.2302-39.913035-40.699957l-0.075725-0.490164-1.087774 0c-18.945491-157.665903-148.177807-280.296871-306.821991-285.4748-3.412726 0.151449-6.751774 0.562818-10.240225 0.562818-3.450589 0-6.789637-0.410346-10.202363-0.524956-158.606321 5.139044-287.839661 127.806851-306.784128 285.436938l-1.014096 0 0.075725 0.490164c0 22.469758-17.854647 40.699957-39.913035 40.699957s-39.915082-18.2302-39.915082-40.699957l-0.373507-3.789303c0-6.751774 2.026146-12.903891 4.91494-18.531052 21.082154-140.712789 111.075795-258.241552 235.432057-312.784796C288.420387 530.831904 239.989351 444.515003 239.989351 346.604042c0-157.591201 125.33352-285.361213 279.924387-285.361213 154.62873 0 279.960203 127.770012 279.960203 285.361213 0 97.873098-48.391127 184.15316-122.103966 235.545644 124.843356 54.732555 215.099986 172.863023 235.808634 314.211285 2.437515 5.290493 4.01443 10.992355 4.01443 17.181311L917.965523 917.331585zM719.822744 346.679767c0-112.576985-89.544409-203.808826-199.983707-203.808826-110.402459 0-199.944821 91.232864-199.944821 203.808826s89.542362 203.808826 199.944821 203.808826C630.278335 550.488593 719.822744 459.256752 719.822744 346.679767z";
//let planePath="path://M621.855287 587.643358C708.573965 540.110571 768 442.883654 768 330.666667 768 171.608659 648.609267 42.666667 501.333333 42.666667 354.057399 42.666667 234.666667 171.608659 234.666667 330.666667 234.666667 443.22333 294.453005 540.699038 381.59961 588.07363 125.9882 652.794383 21.333333 855.35859 21.333333 1002.666667L486.175439 1002.666667 1002.666667 1002.666667C1002.666667 815.459407 839.953126 634.458526 621.855287 587.643358Z";
let colorList = ['rgba(97,241,255,1)', 'rgba(212,243,65,1)', 'rgba(255,201,9,1)', 'rgba(0,102,255,1)', 'rgba(153,204,255,1)', 'rgba(204,0,255,1)', 'rgba(255,204,0,1)', 'rgba(0,255,0,1)'];
let geoCoordMap = {}//各单位经纬度
let breakProvince = []//离线的单位名称
let centerGather = {}//中心点和它对应的单位集合，eg:{中心点A:[单位1,单位2...]}
//参照：https://gallery.echartsjs.com/editor.html?c=xD4a1EBnvW
export default {
    name: 'CenterMap',
    data() {
        return {
            myChart: {},
            orgIds:this.$store.state.userInfo.organizationIds,
            platformId:localStorage.getItem("ilinkBs_platformId"),
        }
    },
    mounted() {
        let that = this
        that.getData()
    },
    computed: {
        scrollerHeight() {
            return (window.innerHeight - 46 - 50) + 'px';
        }
    },
    methods: {
        getData() {
            let that = this
            getDataTransmitStatus({
                orgIds: that.orgIds,
                platId: that.platformId,
                //queryAll:1//默认只查有用传的单位，1查全部，没有用传的单位，返回在线
            }).then(res => {
                if(res.status === 200) {
                    that.$nextTick(() => {
                        that.drawChart(res.data)
                    })
                }
                that.$Ctl.loading(0)
            })
        },
        drawChart(data){
            let that = this
            breakProvince = []
            centerGather = {}
            for(let i = 0,leng = data.length; i < leng; i++){
                let objEach = data[i]
                let objCenter = objEach.platInfo
                if(!objCenter.mapLocation) continue
                let addressCenter = JSON.parse(objCenter.mapLocation)
                geoCoordMap[objCenter.name]=[ addressCenter.lon,addressCenter.lat ]
                centerGather[objCenter.name]=[]
                for(let j = 0,l = objEach.orgList.length; j < l; j++){
                    let objOrg = objEach.orgList[j].organization
                    geoCoordMap[objOrg.shortName]=[ objOrg.longitude,objOrg.latitude ]
                    if(objEach.orgList[j].status!==1){
                        breakProvince.push(objOrg.shortName)
                    }
                    centerGather[objCenter.name].push(
                        [{
                            name: objCenter.name
                        }, {
                            name: objOrg.shortName,
                            value: 1,
                            organizationId: objOrg.organizationId,
                            address: objOrg.address
                        }]
                    )
                    //把中心点也存入所属单位数组中
                    if(j+1 ===l){
                        centerGather[objCenter.name].push(
                            [{
                                name: objCenter.name
                            }, {
                                name: objCenter.name,
                                value: 2,
                                organizationId: objCenter.orgCode,
                                address: ''
                        }]
                        )
                    }
                }
            }
            let mySeries = [];
            Object.keys(centerGather).forEach(function(centerName,index){
                let centerOrgs = centerGather[centerName]
                let currentColor = colorList[index]?colorList[index]:colorList[0]
                mySeries.push({ //线
                    name: centerName,
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength:  0.7, //特效尾迹长度[0,1]值越大，尾迹越长重
                        color: '#fff',
                        //symbol: 'arrow', //箭头图标
					    symbolSize: 5, //图标大小
                    },
                    lineStyle: {
                        normal: {
                            color:function(params) {
                                if(breakProvince.length>0){
                                    if(breakProvince.indexOf(params.data.toName)>-1){
                                        return 'red'; 
                                    }else{
                                        return currentColor;  
                                    }
                                }else{
                                    return currentColor;  
                                }
                            },
                            width: 1, //尾迹线条宽度
                            opacity: 1, //尾迹线条透明度
                            curveness: .3 //尾迹线条曲直度
                        }
                    },
                    data: that.convertData(centerOrgs)
                },{ //省份圆点
                    name: "用户信息传输装置数",
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: { //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 4 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right', //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: function(params){//圆环显示文字
                                return params.data.name;
                            },
                            fontSize: 13
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbolSize:  function(val) {
					    return 5+ val[2] * 5; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                if(centerGather.hasOwnProperty(params.name)){
                                    return currentColor;
                                }else{
                                    if(breakProvince.length>0){
                                        if(breakProvince.indexOf(params.name)>-1){
                                            return 'red'; 
                                        }else{
                                            return currentColor;  
                                        }
                                    }else{
                                        return currentColor;  
                                    }
                                }
                            }
                        }
                    },
                    data: centerOrgs.map(function(dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                });
            });
            // 基于准备好的dom，初始化echarts实例
            let $dom = document.getElementById('containerplanMap_china');
            if($dom){
                that.myChart = Echarts.init($dom);
                let option_planPathMap = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(166, 200, 76, 0.82)',
                        borderColor: '#FFFFCC',
                        showDelay: 0,
                        hideDelay: 0,
                        enterable: true,
                        transitionDuration: 0,
                        extraCssText: 'z-index:100',
                        formatter: function(params) {
                            if(params.seriesType==="effectScatter"){
                                if(centerGather.hasOwnProperty(params.name)){
                                    return params.name + '<br>' + "数据处理中心站";
                                }else{
                                    return params.name + '<br>' + params.seriesName + ': ' + params.data.value[2];
                                }
                            } else if (params.seriesType==="lines") {
                                if(breakProvince.length>0){
                                    if(breakProvince.indexOf(params.data.toName )>-1){
                                        return "<span style='color:red;'>"+params.data.toName +"离线<span>";
                                    }else{
                                        return params.data.toName  + '→→' + params.data.fromName;  
                                    }
                                }else{
                                    return params.data.toName  + '→→' + params.data.fromName;  
                                }
                            }
                        }
                    },
                    geo: {
                        map: 'china',
                        /* width:"80%",
                        height:"80%", */
                        zoom: 1.1,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: 'transparent',  //区域默认颜色
                                borderColor: 'rgba(99,189,241,.8)',   //边框颜色
                                borderWidth:1,
                            },
                            emphasis: {
                                areaColor: 'rgba(99,189,241,.5)',  //高亮区域颜色
                            }
                        },
                        /*regions: [{
                            name: '南海诸岛',
                            itemStyle: {
                                normal: {
                                    areaColor: '#E4F1F9'
                                }
                            }
                        }],*/
                    },
                    series: mySeries
                }
                that.myChart.setOption(option_planPathMap, true);
            }
        },
        convertData(data) {
            let res = [];
            for (let i = 0,l = data.length; i < l; i++) {
                let dataItem = data[i];
                let fromCoord = geoCoordMap[dataItem[0].name];
                let toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [ toCoord,fromCoord]
                    });
                }
            }
            return res;
	    }
    }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.containerplanMap-container{
    position: relative;
    width: 100%;
    height: 100%;
}
#containerplanMap_china{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
@keyframes opacplanwave{
    from {
        opacity: 1;
        width:0;
        height:0;
        top:50%;
        left:50%;
    }
    to {
        opacity : 0;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }
}
.plan-circle{
    position: relative;
    height: 100%;
    margin: auto;
    .w1{
		animation:opacplanwave 10s infinite;
        border:2px solid rgba(6,32,60,1);
        -webkit-box-shadow: 0px 0px 25px rgba(6,32,60,1) inset;
        box-shadow: 0px 0px 25px rgba(6,32,60,1) inset;
	}
    .w2{
		animation:opacplanwave 15s infinite;
        border:2px solid rgba(3,29,51,1);
        -webkit-box-shadow: 0px 0px 25px rgba(3,29,51,1) inset;
        box-shadow: 0px 0px 25px rgba(3,29,51,1) inset;
	}
    .w3{
		animation:opacplanwave 20s infinite;
        border:2px solid rgba(2,26,43,1);
        -webkit-box-shadow: 0px 0px 25px rgba(2,26,43,1) inset;
        box-shadow: 0px 0px 25px rgba(2,26,43,1) inset;
	}
	&.planwave *{
		position:absolute;
        border-radius:100%;
        opacity :0;
    }
}
</style>